<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="text-area">
			<uv-form labelPosition="left" :model="loginInfo" :rules="rules" ref="loginFormRef">
				<uv-form-item label="账号" prop="account" borderBottom>
					<uv-input v-model="loginInfo.account" border="none" placeholder="请输入登录账号"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码" prop="password" borderBottom>
					<uv-input type="password" v-model="loginInfo.password" border="none" placeholder="请输入登录密码"></uv-input>
				</uv-form-item>
			<uv-button type="primary" text="登录" customStyle="margin-top: 10px" @click="submit"></uv-button>
			</uv-form>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import authApi from '@/api/modules/auth/loginApi.js'
	import smCrypto from '@/utils/smCrypto'
	import tool from '@/utils/tool.js'
	import userStore from '@/store/user.js'
	const title = ref('滁州学院车辆违停系统')
	const loginFormRef = ref()
	const loginInfo = ref({
		account: '203720',
		password: '123456',
		device: 'APP'
	})
	const rules = ref({
		'account': {
			type: 'string',
			required: true,
			message: '请填写账号',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			required: true,
			message: '请填写密码',
			trigger: ['blur', 'change']
		},
	})
	
	const submit = () => {
		authApi.login({
			account: loginInfo.value.account,
			// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
			password: smCrypto.doSm2Encrypt(loginInfo.value.password),
		}).then(async loginToken => {
			tool.data.set('TOKEN', loginToken)
			uni.showToast({title:'登录成功', icon:'none'})
			await userStore().initUserInfo()
			uni.switchTab({
				url: '/pages/illegalrecord/report'
			})
		},err=>{
			console.log('err',err)
		})
	}
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: black;
		margin-bottom: 30rpx;
	}
</style>